<template>
    <div class="editor">
        <div class="header">
            <p @click="back" class="back">
                <Icon type="chevron-left"></Icon>
            </p>
            <div class="title">
                发布文章
            </div>
        </div>
        <div class="container">
            <input v-model="title" class="articletitle" style="width: 100%" placeholder="这里输入标题"/>
            <div id="editor">
            </div>
        </div>
        <input class="file" type="file" @change="getsrc" ref="file">
        <p class="addtag" @click="()=>{this.tagPickFlag = true;}">#添加标签</p>
        <ul class="articletaglist">
            <li class="articletag" v-for="item in tags">{{item.name}}</li>
        </ul>
        <div class="tagcontainer" v-show="tagPickFlag">
            <div style="width: 100%;height: 40px;" @click="()=>{this.tagPickFlag = false;}">
                <Icon style="font-size: 20px;margin:0 auto;" type="close"></Icon>
            </div>
            <tag-picker v-model="emitTag"></tag-picker>
        </div>
        <p class="publisharticle" @click="publishArticle">发布文章</p>
    </div>
</template>

<script>
    import Quill from 'quill';
    import * as appInfo from '@/conf/appInfo';
    import tagPicker from '@/components/tagpicker';
    import 'quill/dist/quill.snow.css';

    export default {
        name: 'addarticle',
        data() {
            return {
                quill: {},
                title: '',
                content: '',
                publishFlag: true,
                emitTag: undefined,
                tags: [],
                tagPickFlag: false
            };
        },
        components: {
            tagPicker
        },
        methods: {
            back() {
                if (document.referrer.match(appInfo.host) > 0) {
                    window.history.back();
                } else {
                    this.$router.push({
                        name: 'index'
                    });
                }
            },
            getsrc(e) {
                const files = e.target.files[0];
                const fileReader = new FileReader();
                fileReader.onloadend = (f) => {
                    const base64 = f.target.result;
                    const file = this.$Utils.base2file(base64, {type: 'image/jpeg'});
                    const formData = new FormData();
                    formData.append('file', file, `${this.CONF.user.nickname}.jpg`);
                    this.$Api.uploadImage(formData).then((res) => {
                        this.quill.insertEmbed(this.quill.getSelection() !== null ? this.quill.getSelection().index : 0,
                            'image', res.body.img_url);
                        this.$refs.file.value = '';
                    }).catch((err) => {
                        console.log(err);
                    });
                };
                fileReader.readAsDataURL(files);
            },
            publishArticle() {
                if (!this.title) {
                    this.$Modal.info({
                        content: '请补全标题~'
                    });
                    this.publishFlag = false;
                }
                if (!this.content) {
                    this.$Modal.info({
                        content: '请补编写内容~'
                    });
                    this.publishFlag = false;
                }
                if (this.publishFlag) {
                    this.$Api.addArticle({
                        title: this.title,
                        content: this.content,
                        // eslint-disable-next-line
                        tags: this.tags.map(item => item._id)
                    }).then((res) => {
                        console.log(res);
                        if (res.ok) {
                            this.publishFlag = true;
                            console.log(res);
                            // this.$router.push({name: 'reviewArticle', query: {id: res.body.process_id}
                            // });
                        }
                    }).catch((error) => {
                        console.log(error);
                    });
                }
            }
        },
        watch: {
            emitTag(item) {
                let flag = true;
                this.tags.map((tag) => {
                    if (item.name === tag.name) {
                        flag = false;
                        this.$Modal.info({content: '请勿重复添加'});
                        this.tagPickFlag = false;
                    }
                    return 1;
                });
                if (flag && this.tags.length < 3) {
                    this.tags.push(item);
                    this.tagPickFlag = false;
                } else {
                    this.tagPickFlag = false;
                    this.$Modal.info({content: '最多只能添加三个~'});
                }
            }
        },
        mounted() {
            const toolbarOptions = [
                [{header: [1, 2, 3, 4, 5, 6, false]}],
                ['bold'], // toggled buttons
                ['blockquote', 'code-block'],
                ['clean'],
                ['image']
            ];
            this.quill = new Quill('#editor', {
                modules: {
                    toolbar: toolbarOptions
                },
                theme: 'snow',
                placeholder: '在这里，开始你的创作吧^_^'
            });
            this.quill.on('text-change', () => {
                this.content = this.quill.container.firstChild.innerHTML;
            });
            const toolbar = this.quill.getModule('toolbar');
            toolbar.addHandler('image', () => {
                this.$refs.file.click();
            });
        }
    };
</script>

<style lang="scss">
    .editor {
        .header {
            position: fixed;
            top: 0px;
            height: 44px;
            width: 100%;
            z-index: 999;
            background: rgb(253, 163, 62);
            display: flex;
            .back {
                line-height: 44px;
                position: fixed;
                left: 0px;
                color: white;
                width: 44px;
                height: 44px;
            }
            .title {
                justify-content: center;
                line-height: 44px;
                width: 100%;
                font-size: 17px;
                color: white;
                font-weight: 300;
            }
        }
        .container {
            margin-top: 45px;
            width: 100%;
            .articletitle {
                display: block;
                border-radius: 0;
                border: none;
                height: 44px;
                text-align: center;
                font-size: 15px;
            }
            #editor {
                height: 100vw;
                background: whitesmoke;
                max-height: 80vh;
                overflow: auto;
            }
        }
        .publisharticle {
            width: 100vw;
            height: 40px;
            font-size: 18px;
            color: white;
            line-height: 40px;
            background: rgb(253, 163, 62);
            bottom: 0px;
            position: fixed;
        }
        .tagcontainer {
            width: 100%;
            height: 100%;
            min-width: 100vw;
            min-height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 999;
            background: rgba(250, 250, 250, 0.9);
            padding: 50px 10px;
        }
        .file {
            width: 0;
            height: 0;
            position: absolute;
            left: -200px;
        }
        .addtag {
            padding: 0 5px;
            background: rgb(250, 250, 250);
            border-radius: 15px;
            float: left;
            margin: 10px 10px;
            display: inline-block;
            color: #999;
            border: 1px solid #999;
            font-size: 17px;
        }
        .articletaglist {
            clear: both;
            padding: 10px;
            .articletag {
                padding: 0 5px;
                margin: 5px 5px;
                display: inline-block;
                float: left;
                background: rgb(253, 163, 62);
                border-radius: 15px;
                border: 1px solid rgb(253, 163, 62);
                color: white;
                font-size: 15px;
            }
        }
    }
</style>
